<template>
  <div class="record">
    <Navbar />
    <div class="record__container">
      <h2>Exclusive Deals</h2>
      <ul>
        <li
          class="record__item"
          @click="pathTo(item)"
          v-for="item in recordList"
          :style="{ backgroundColor: item.color }"
        >
          <div class="content">
            <h4>{{ item.name }}</h4>
            <p>Upto</p>
            <p>
              <strong>{{ item.discount }}%</strong>Discount
            </p>
          </div>
          <img :src="item.img" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import Navbar from "@/components/Navbar.vue";
import { useRouter } from "vue-router";
import Bundles from "@/assets/svg/Record/Monthly Bundles.svg";
import Fruits from "@/assets/svg/Record/Fresh Fruits.svg";
import Vegetables from "@/assets/svg/Record/Fresh Vegetables.svg";
const router = useRouter();

import { ref } from "vue";
interface RecordItem {
  id: number;
  discount: number;
  name: string;
  color: string;
  img?: string;
}
const pathTo = (item: RecordItem) => {
  router.push({
    path: `/find/${item.name}`,
    query: {
      color: item.color,
      type: "record",
      name: item.name,
      discount: item.discount,
    },
  });
};
const recordList = ref<RecordItem[]>([
  {
    id: 1,
    discount: 25,
    name: "Monthly Bundles",
    img: Bundles,
    color: "#c9ffcb",
  },
  {
    id: 2,
    discount: 20,
    name: "Fresh Fruits",
    img: Fruits,
    color: "#d4f8fb",
  },
  {
    id: 3,
    discount: 15,
    name: "Fresh Vegetables",
    img: Vegetables,
    color: "#f8e5ff",
  },
]);
</script>

<style lang="scss">
.record {
  font-size: 16rem;
  background: var(--linear-gradient);
  color: var(--font-color);
  min-height: calc(100vh - 41rem);

  &__container {
    padding: 0 20rem 60rem;

    h2 {
      font-size: 24rem;
      font-weight: 600;
    }
  }

  &__item {
    color: #333;
    margin-top: 32rem;
    height: 160rem;
    width: 100%;
    border-radius: 10rem;
    background-color: wheat;
    padding: 14rem 20rem 26rem;
    box-sizing: border-box;
    @include flex($ai: flex-end, $jc: space-between);

    h4 {
      margin-bottom: 40rem;
      font-size: 16rem;
    }

    strong {
      font-size: 40rem;
      font-weight: 600;
      margin-right: 4rem;
    }

    &:first-child {
      margin-top: 26rem;
    }
  }
}
</style>
